<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>


    <style type="text/css">
        .search_input {
            overflow: visible;
            background-color: #FFFFFF;
            background-image: none;
            border: 1px solid #e5e6e7;
            border-radius: 1px;
            color: inherit;
            display: block;
            padding: 6px 12px;
            transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        }
    </style>
</head>

<body>


<div class="breadcome-area">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="breadcome-list single-page-breadcome">
                    <div class="row">
                        <form id="searchForm">
                            <div class="col-lg-2 col-md-2 col-sm-2">

                                <input type="text" name="problemInfo" placeholder="请输入问题描述"
                                       class="search-int form-control">

                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-2">
                                <input type="text" name="trainNo" placeholder="请输入机车编号"
                                       class="search-int form-control">
                            </div>


                        </form>
                        <div class="col-lg-2 col-md-2 col-sm-2">
                            <button class="btn btn-primary" onclick="operation.searchForm()">查询</button>
                            <!--
                                                                        <a href="javascript:void(0)" onclick="operation.searchForm()"><i class="fa fa-search"></i></a>
                            -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mg-b-15">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="product-status-wrap drp-lst">
                    <h4>执行检修</h4>
                    <!--    <div class="add-product">
                            <a href="#"onclick="operation.addWindow()">添加</a>
                        </div>-->
                    <div class="asset-inner">

                        <table id="dg"></table>


                    </div>


                </div>
            </div>
        </div>
    </div>
</div>


<!-- 第一个model 开始 -->
<div id="setExcuteFormModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" data-keybord="false">
    <div class="modal-dialog" style="width:900px">
        <div class="modal-content">
            <div class="modal-header">
                执行检修
            </div>
            <!-- modal-body 开始 -->
            <div class="modal-body">


                <table id="dgmenu"></table>


                <form id="setExcuteFormId" class="form-horizontal" enctype="multipart/form-data">
                    <input type="hidden" name="id">

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label text-right" for="excuteInfo">执行情况总结</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" rows="3" name="excuteInfo"
                                      placeholder="请输入执行情况总结"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label text-right" for="sfwx">是否维修</label>
                        <div class="col-sm-8">
                            <select class=" form-control" name="sfwx" placeholder="请输入申请类型">-->
                                <option value="">--请选择--</option>
                                <option value="是">是</option>
                                <option value="否">否</option>
                            </select>
                        </div>
                    </div>


                </form>
            </div>
            <!-- modal-body 结束 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-outline btn-sm" onclick="operation.editForm()">
                    <span class="glyphicon glyphicon-ok"></span>完成
                </button>

                <button type="button" class="btn btn-default btn-outline btn-sm" onclick="operation.closeMoal()">
                    <span class="glyphicon glyphicon-remove"></span>关闭
                </button>
            </div>

        </div>
    </div>
</div>
<!-- 第一个model 结束 -->


<!-- Page-Level Scripts -->
<script type="text/javascript" th:inline="none">

    var planDetailId;
    var trainNo;
    var operation = {

        searchForm: function () {
            $('#dg').bootstrapTable("refresh");
        },

        //弹出修改页面
        excuteWindow: function (index) {

            var row = $('#dg').bootstrapTable("getData")[index];

            var columns = [[
                {
                    field: 'ck',
                    width: '2%',
                    checkbox: false,
                    align: 'center',

                },
                {
                    field: 'id',
                    title: 'id',
                    width: 10,
                    align: 'center',
                    visible: false
                },
                {
                    title: '类型',
                    field: 'repairTypeName',
                    align: 'center',
                    valign: 'middle',
                    visible: true,
                    width: "10%"
                },
                {title: '清单标题', field: 'menuTitle', align: 'center', valign: 'middle', visible: true, width: "50%"},


                {
                    title: '有无异常',
                    field: 'complete',
                    align: 'center',
                    valign: 'middle',
                    width: "20%",
                    visible: true,
                    formatter: function (value, row, index) {


                        htm = "<select id='complete" + row.id + "' style='width: 65px;height: 25px'>" +
                            "<option value='无异常'>无异常</option>" +
                            "<option value='有异常'>有异常</option>" +
                            "</select>";
                        return htm;
                    }
                },
                {
                    title: '异常原因',
                    field: 'remark',
                    align: 'center',
                    valign: 'middle',
                    width: "20%",
                    visible: true,
                    formatter: function (value, row, index) {


                        var htm = "<input type='text' id='remark" + row.id + "' style='width: 100px;height: 25px'>";

                        return htm;
                    }
                },


            ]];
            $('#dgmenu').bootstrapTable("destroy");

            $('#dgmenu').bootstrapTable({
                url: "/ZcxRepairMenu/findList",
                sidePagination: "server",
                queryParams: function (params) {
                    var temp = {};
                    temp.repairTypeId = row.repairTypeId;
                    temp.isUse = 1;
                    return temp;

                },
                method: "post",
                contentType: "application/x-www-form-urlencoded",
                pagination: false,
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 25, 50, 100],
                //search:true,
                clickToSelect: true,
                singleSelect: true,
                toolbar: '#toolbar',
                columns: columns,
            })


            var row = $("#dg").bootstrapTable("getData")[index];
            planDetailId = row.planDetailId;
            trainNo = row.trainNo;
            //setForm("#setFormId",row);
            $('#setExcuteFormModal').modal('show');
            //	formObj.setBtnIsShow("add_save_btn","edit_save_btn",0);

        },
        //修改表单
        editForm: function () {
            var temp = getFormJson("setExcuteFormId");
            temp.excuteStatus = "完成";
            temp.planDetailId = planDetailId;

            temp.userId = $("#userId").val();


            var rows = $("#dgmenu").bootstrapTable("getData")


            for (var i = 0; i < rows.length; i++) {
                var complete = $("#complete" + rows[i].id).val();
                var remark = $("#remark" + rows[i].id).val();
                console.info(complete, remark);

                var temp2 = {isComplete: complete, remark: remark, repairMenuId: rows[i].id, planId: temp.planDetailId}

                $.post("/ZcxMenuExcute/insertZcxMenuExcute", temp2, function (data) {


                });
            }

            temp.trainNo = trainNo;
            $.post("/ZcxPlanExcute/insertZcxPlanExcute", temp, function (data) {

                $("#dg").bootstrapTable("refresh");
                message.alert(data.showInfo);
                //$('#setFormId').data('bootstrapValidator').resetForm(true);
                $('#setExcuteFormId')[0].reset();
                $('#setExcuteFormModal').modal('hide');
            });


        },

        //关闭页面
        closeMoal: function () {
            //$('#setFormId').data('bootstrapValidator').resetForm(true);
            $('#setExcuteFormId')[0].reset();
            $('#setExcuteFormModal').modal('hide');
        },
        //导出
        exportFile: function () {


        },
        //审核
        audit: function () {


        },


    }


    $(function () {
        //表格格式化
        var fmt = {
            queryParams: function (params) {
                var temp = getFormJson("searchForm");
                temp.rows = params.limit;
                temp.userId = $("#userId").val();
                temp.currentPage = (params.offset / params.limit) + 1;
                return temp;

            },
            setTime: function (value, row, index) {

                return formatTimeYMDhms(value);  //转成年月日时分秒
            },
            setOpt: function (value, row, index) {
                var html = '';
                /* '<button class="btn-white btn btn-xs">查看</button>'+ */
                if (row.planDetailStatus == "待执行") {
                    html += '<button id="edit_btn" class="btn btn-outline-secondary btn-sm"  onclick="operation.excuteWindow(' + index + ')">执行</button>';

                }
                /* html +='<button class="btn btn-outline-secondary btn-sm"  onclick="operation.deleteFrom('+index+')">删除</button>';*/
                return html;
            },
            setActImgUrl: function (value, row, index) {
                return '<img src="/TBook/queryPic?id=' + row.id + '" style="width:100px;heigth:100px"></img>';
            },
            setBorrow: function (value, row, index) {
                var htm = "";
                if (row.borrow == 0) {
                    htm = "未借阅";
                }
                if (row.borrow == 1) {
                    htm = "<span style='color:red;'>已借阅</span>";
                }
                return htm;
            },
        }

        var columns = [[

            {
                field: 'id',
                title: 'id',
                width: 10,
                align: 'center',
                visible: false
            },

            {title: '计划详情ID', field: 'planDetailId', align: 'center', valign: 'middle', visible: false},
            {title: '分配人员', field: 'userId', align: 'center', valign: 'middle', visible: false},
            {title: '计划名称', field: 'planName', align: 'center', valign: 'middle', visible: true},
            {title: '开始时间', field: 'planStar', align: 'center', valign: 'middle', visible: true},
            {title: '结束时间', field: 'planEnd', align: 'center', valign: 'middle', visible: true},
            {title: '机车号', field: 'trainNo', align: 'center', valign: 'middle', visible: true},
            {title: '计划详情类型', field: 'planDetailType', align: 'center', valign: 'middle', visible: true},
            {title: '计划详情描述', field: 'planDetailInfo', align: 'center', valign: 'middle', visible: true},
            {title: '计划状态', field: 'planDetailStatus', align: 'center', valign: 'middle', visible: true},
            {title: '计划清单', field: 'repairTypeId', align: 'center', valign: 'middle', visible: false},
            {title: '计划清单', field: 'repairTypeName', align: 'center', valign: 'middle', visible: true},


            {title: '操作', field: 'opt', align: 'center', valign: 'middle', visible: true, formatter: fmt.setOpt},


        ]];


        $('#dg').bootstrapTable({
            url: "/ZcxPlanDetailUser/query",
            sidePagination: "server",
            queryParams: fmt.queryParams,
            method: "post",
            contentType: "application/x-www-form-urlencoded",
            pagination: true,
            pageNumber: 1,
            pageSize: 10,
            pageList: [10, 25, 50, 100],
            //search:true,
            clickToSelect: true,
            singleSelect: true,
            toolbar: '#toolbar',
            columns: columns,
        })

    });


    $(function () {
        $("#setFormId").bootstrapValidator({
            /* live:'disabled',
            excluded:[':disabled'],
            feedbackIcons: {
        　　　　　　　　valid: 'glyphicon glyphicon-ok',
        　　　　　　　　invalid: 'glyphicon glyphicon-remove',
        　　　　　　　　validating: 'glyphicon glyphicon-refresh'
    　　　　　   },*/
            fields: {


                planDetailId: {
                    validators: {
                        notEmpty: {
                            message: "计划详情ID不能为空!",
                        },
                    }

                },


                userId: {
                    validators: {
                        notEmpty: {
                            message: "分配人员不能为空!",
                        },
                    }

                },


            }

        });


    })


</script>

</body>

</html>
